import removeImg from '@/assets/Icon/removeImg.png'
import { Form, Input, message, Modal } from 'antd'
import { connect } from 'dva'
import React from 'react'
import styles from './styles.less'

function mapStateToProps({ globalModel, orgModel }) {
  return {
    globalModel: globalModel,
    orgModel: orgModel,
  }
}
@connect(mapStateToProps)
class CompanyAdd extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      radioType: props.orgModel?.checkOrg?.type? props.orgModel?.checkOrg?.type:1 ,
      form: null,
      provin: '',
      city: '',
    }
  }
  //渲染之前
  componentWillMount() {}
  //渲染之后
  componentDidMount() {}
  //卸载
  componentWillUnmount() {}
  onClose = () => {
    let { closeVisible } = this.props
    if (closeVisible) {
      closeVisible()
    }
  }
  changeRadio = (value) => {
    this.setState({
      radioType: value,
    })
  }
  onChangeCity = (value, selectedOptions) => {
    console.log(selectedOptions, 'selectedOptionsselectedOptions')
    this.setState({
      provin: selectedOptions[0]?.label,
      city: selectedOptions[1]?.label,
    })
  }
  handleChange = (value) => {
    console.log(value)
  }
  onFinish = () => {
    let { form } = this.state
    let { checkOrg } = this.props.orgModel
    form?.setFieldsValue({ type: this.state.radioType, parentId: checkOrg?.id })
    form
      ?.validateFields()
      .then((value) => {
        //新增组织
        this.props.dispatch({
          type: 'orgModel/addOrganizationEffects',
          payload: {
            params: { name: value?.name, parentId: value?.parentId, type: value?.type },
            callback: (data) => {
              message.success('新增成功')
              let { closeVisible } = this.props
              if (closeVisible) closeVisible()
            },
          },
        })
      })
      .catch((res) => {
        console.log(res, 111)
      })
  }
  render() {
    let { companyAdd, Industry } = this.props
    let { checkOrg } = this.props.orgModel
    let { radioType, form } = this.state
    return (
      <React.Fragment>
        <div className={styles.addHome}>
          <Modal
            className={styles.addHome}
            closable={false}
            width={527}
            onCancel={this.onClose}
            open={companyAdd}
            footer={null}
          >
            <div className={styles.addTitle}>
              <div>新增组织</div>
              <img
                src={removeImg}
                alt=""
                style={{ width: '21px', height: '21px', cursor: 'pointer' }}
                onClick={this.onClose}
              />
            </div>
            <Form
              style={{ padding: '21px', paddingBottom: '5px' }}
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 16 }}
              ref={(event) => {
                if (!form && event) {
                  this.setState({ form: event })
                }
              }}
            >
              <Form.Item label="组织类型" name="type" rules={[{ required: true }]} value={radioType}>
                <div className={styles.organizationType}>
                  <div
                    className={styles.types}
                    style={{
                      borderTopLeftRadius: '5px',
                      borderBottomLeftRadius: '5px',
                      cursor: checkOrg? checkOrg.type == 1 ? '' : 'not-allowed':'',
                      borderColor: radioType === 1 ? '#1890ff' : 'rgba(41,57,77,0.15)',
                    }}
                    onClick={this.changeRadio.bind(this, checkOrg? checkOrg.type == 1 ? 1 : 2:1)}
                  >
                    公司
                  </div>
                  <div
                    className={styles.types}
                    style={{
                      borderBottomRightRadius: '5px',
                      borderTopRightRadius: '5px',
                      borderColor: radioType === 2 ? '#1890ff' : 'rgba(41,57,77,0.15)',
                    }}
                    onClick={this.changeRadio.bind(this, 2)}
                  >
                    部门
                  </div>
                </div>
              </Form.Item>
              {radioType === 1 ? (
                <>
                  <Form.Item label="子公司名称" name="name" rules={[{ required: true, message: '请输入子公司名称' }]}>
                    <Input placeholder="请输入子公司名称" />
                  </Form.Item>
                  {
                    checkOrg?.id&&     <Form.Item label="上级组织" name="parentId">
                    <div> {checkOrg?.name} </div>
                  </Form.Item>
                  }
                </>
              ) : (
                <>
                  <Form.Item label="部门名称" name="name" rules={[{ required: true, message: '请输入部门名称' }]}>
                    <Input placeholder="请输入部门名称" />
                  </Form.Item>
                  {
                    checkOrg?.id&&     <Form.Item label="上级组织" name="parentId">
                    <div> {checkOrg?.name} </div>
                  </Form.Item>
                  }
             
                </>
              )}
            </Form>
            <div className={styles.modelFooter}>
              <div
                className={styles.footerBtn}
                onClick={this.onFinish}
                style={{
                  background: 'linear-gradient(90deg, #68ecd8 0%, #29a6ff 80%)',
                  color: '#fff',
                }}
              >
                确认
              </div>
              <div
                className={styles.footerBtn}
                onClick={this.onClose}
                style={{ border: '1px solid rgba(41,57,77,0.15)' }}
              >
                取消
              </div>
            </div>
          </Modal>
        </div>
      </React.Fragment>
    )
  }
}
export default CompanyAdd
